<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="multiple">
  <link rel="stylesheet" href="./assets/common.css">
  <title>Multiple Plot</title>
</head>

<body>
  <div id="canvas"></div>
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="../build/g2.js"></script>
  <script>
    const data = [
      { time: '10:10', call: 4, waiting: 2, people: 2 },
      { time: '10:15', call: 2, waiting: 6, people: 3 },
      { time: '10:20', call: 13, waiting: 2, people: 5 },
      { time: '10:25', call: 9, waiting: 9, people: 1 },
      { time: '10:30', call: 5, waiting: 2, people: 3 },
      { time: '10:35', call: 8, waiting: 2, people: 1 },
      { time: '10:40', call: 13, waiting: 1, people: 2 }
    ];

    const chart = new G2.Chart({
      container: 'canvas',
      forceFit: true,
      height: window.innerHeight
    });
    chart.source(data, {
      call: {
        min: 0
      },
      people: {
        min: 0
      },
      waiting: {
        min: 0
      }
    });
    chart.legend({
      custom: true,
      allowAllCanceled: true,
      items: [
        { value: 'waiting', fill: '#3182bd' },
        { value: 'call', fill: '#99d8c9' },
        { value: 'people', fill: '#fdae6b' }
      ],
      onClick: ev => {
        const item = ev.item;
        const value = item.value;
        const checked = ev.checked;
        const geoms = chart.getAllGeoms();
        for (let i = 0; i < geoms.length; i++) {
          const geom = geoms[i];
          if (geom.getYScale().field === value) {
            if (checked) {
              geom.show();
            } else {
              geom.hide();
            }
          }
        }
      }
    });
    chart.tooltip(false);

    chart.axis('waiting', false);
    chart.axis('call', false);
    chart.axis('people', false);
    chart.interval()
      .position('time*waiting')
      .color('#3182bd');
    chart.line()
      .position('time*call')
      .color('#99d8c9')
      .size(3)
      .shape('smooth');
    chart.line()
      .position('time*people')
      .color('#fdae6b')
      .size(3)
      .shape('smooth');
    chart.point()
      .position('time*people')
      .color('#fdae6b')
      .size(3)
      .shape('circle');
    chart.render();
  </script>
</body>

</html>
